<template>
	<div v-loading="loading2" @click="()=>{$router.push('wasteWater/home')}" class="point pl10 pr10 mb12" style="width: 50%;display: inline-block;vertical-align: top;">
		<div class="displayFlex mb18 pl10">
			<div style="font-size: 15px;color: #5A5A5A;">废水排放口</div>
			<div v-if="listHeaderMock.mock3" style="color: #888;" class="font12 ml10">以下数据为演示数据</div>
		</div>

		<div class="displayFlexBet mb12"
			style="width: 100%;height: 104px;background: linear-gradient(90deg, #08A69F, #04766D);border-radius: 20px;">
			<div class="displayFlex" style="padding: 27px 0 26px 41px;flex: 1;">
				<div style="width: 51px;height: 51px;">
					<img src="@/assets/sIcon165.png" style="width: 100%;height:51px;width:51px" />
				</div>
				<div class="colorfff ml18">
					<div style="font-size: 14px;" class="mb8">主排口</div>
					<div style="font-size: 16px;" class="">{{dataList3.organizedNum}}</div>
				</div>
			</div>
			<div style="height: 100%;width: 1px;background: #fff"></div>
			<div class="displayFlex" style="padding: 27px 0 26px 41px;flex: 1;">
				<div style="width: 51px;height: 51px;border-radius: 50%;">
					<img src="@/assets/sIcon166.png" style="width: 100%;height:51px;width:51px" />
				</div>
				<div class="colorfff ml18">
					<div style="font-size: 14px;" class="mb8">其他排口</div>
					<div style="font-size: 16px;" class="">{{dataList3.disorganizedNum}}</div>
				</div>
			</div>
		</div>

		<div class="displayFlexBet">
			<div style="width: 534px;height: 280px;background: #FFFFFF;border-radius: 20px;" class="pad20">
				<div class="displayFlexBet mb20">
					<div style="width: 237px;height: 110px;background: #ECF6FF;border-radius: 12px;padding-left: 32px;"
						class="displayFlex">
						<div style="width: 52px;height: 52px;background: #B7E6FF;border-radius: 50%;padding: 6px;"
							class="mr15">
							<el-progress type="circle" :percentage="dataList3.inspectPercent" color="#2C71FF" :width="40"
								:stroke-width="5" :show-text="false"></el-progress>
						</div>
						<div>
							<div class="font18" style="color: #1A55AF;">{{dataList3.inspectPercent}}%</div>
							<div class="font14" style="color: #5A5A5A;">设备设施巡检率</div>
						</div>
					</div>

					<div style="width: 237px;height: 110px;background: #F6F4FF;border-radius: 12px;padding-left: 32px;"
						class="displayFlex ml20">
						<div style="width: 52px;height: 52px;background: #D9D3FF;border-radius: 50%;padding: 6px;"
							class="mr15">
							<el-progress type="circle" :percentage="dataList3.surveyPercent" color="#604BBA" :width="40"
								:stroke-width="5" :show-text="false"></el-progress>
						</div>
						<div>
							<div class="font18" style="color: #5843BE;">{{dataList3.surveyPercent}}%</div>
							<div class="font14" style="color: #5A5A5A;">自行监测完成率</div>
						</div>
					</div>
				</div>

				<div class="displayFlexBet">
					<div style="width: 237px;height: 110px;background: #FFFBF0;border-radius: 12px;padding-left: 32px;"
						class="displayFlex">
						<div style="width: 52px;height: 52px;background: #C3E8D1;border-radius: 50%;padding: 6px;"
							class="mr15">
							<el-progress type="circle" :percentage="dataList3.standingBookPercent" color="#348D50" :width="40"
								:stroke-width="5" :show-text="false"></el-progress>
						</div>
						<div>
							<div class="font18" style="color: #427A0A;">{{dataList3.standingBookPercent}}%</div>
							<div class="font14" style="color: #5A5A5A;">台账完整率</div>
						</div>
					</div>

					<div style="width: 237px;height: 110px;background: #FFECE6;border-radius: 12px;padding-left: 32px;"
						class="displayFlex ml20">
						<div style="width: 52px;height: 52px;background: #FFDAC9;border-radius: 50%;padding:10px 6px;"
							class="mr15 textCenter">
							<img src="../../assets/sIcon104.png" style="width: 28px;height: 28px;" />
						</div>
						<div>
							<div class="font18" style="color: #FA5F1C;">{{dataList3.onlineMonitorWarning}}</div>
							<div class="font14" style="color: #5A5A5A;">在线监测预警</div>
						</div>
					</div>
				</div>
			</div>

			<div
				style="width: 320px;height: 280px;background: #E9E5DD;border-radius: 20px;padding: 15px 25px;overflow-y: auto;"
				class="ml12">
				<div style="color: #777777;" v-for="(item,index) in dataList3.pollutionList" :key="index" class="displayFlexBet mb20">
					<div class="text_overflow font14">
						<span>{{item.pollutionName}}</span>
					</div>
					<div class="font14">
						<span class="">{{item.amount}}</span>
						<span class="">{{item.unitValue}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let that
	import HomeMock from "@/assets/mock/HomeMock.json"

	export default {
		data() {
			return {
				dataList3: HomeMock.feishui,
				loading2: true,
				listHeaderMock: {
					mock3: false,
				}
			}
		},
		mounted: function() {
			that = this
			that.countWaterOutlet()
		},

		methods: {
			countWaterOutlet() {
				that.ajax({
					url: '/homepage/countWaterOutlet',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.listHeaderMock.mock3 = false
						if (result.status == -6) {
							that.listHeaderMock.mock3 = true
							result.data = HomeMock.feishui
						}
						if (result.data) {
							that.dataList3 = result.data
						}
						that.loading2 = false
					},
				}, false)
			},
		}
	}
</script>

<style scoped>

</style>